<template>
  <div class="all">
    <h1>成员收入</h1>
    <div id="options" style="width:100%;margin-top:5px;text-align: left;padding-bottom: 10px;">
       <b style="font-size: 15px;">日期</b>
           <el-date-picker
             v-model="condition.value"
             type="daterange"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期">
           </el-date-picker>
            <b style="font-size: 15px;">成员ID</b>
            <el-input v-model="condition.Id" placeholder="成员ID"></el-input>
              <b style="font-size: 15px;">分成方式:</b>
                    <el-select v-model="condition.Division" placeholder="请选择">
                      <el-option label="聊天室主持分成" value="聊天室主持分成"></el-option>
                       <el-option label="收礼人" value="收礼人"></el-option>
                    </el-select>
            <el-button
              type="primary"
              @click="postList"
              icon="el-icon-search"
              style="margin-left:10px;"
            >查询</el-button>
              <el-button type="primary" icon="el-icon-download" @click="exportExcel">导出</el-button>
    </div>
    <div class="center">
      <el-table :data='list' border >
        <el-table-column align="center" prop="" label="成员Id"  ></el-table-column>
        <el-table-column align="center" prop="" label="成员昵称"></el-table-column>
        <el-table-column align="center" prop="" label="分成方式"  ></el-table-column>
        <el-table-column align="center" prop="" label="对公流水(元)"  ></el-table-column>
        <el-table-column align="center" prop="" label="总流水(元)"  ></el-table-column>
        <el-table-column align="center" prop="" label="分成后金额(元)"  ></el-table-column>
      </el-table>
      <el-pagination
        :page-size="pageinfo.pageSize"
        :current-page="pageinfo.pageNum"
        @current-change="current_change"
        background
        layout="total,prev, pager, next"
        :total="pageinfo.total"
        style="margin:20px auto;display: table;"
        prev-text="上一页"
        next-text="下一页 "
        hide-on-single-page
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  //文件导出
 /* npm install -S file-saver xlsx
    npm install -D script-loader
    引入Expcel文件夹*/
    import Blob from '@/Expcel/Blob'
    import Export2Excel from '@/Expcel/Export2Excel.js'
  export default{
    data(){
      return{
        list:[],//列表
        condition:{
           status:'全部',
            value:'',
            Division:'',//分成方式
            Id:''
        },
        statusList: [
                { label: "全部",},
                {label: "待审核发票",},
                {label: "待打款",},
                {label: "付款中",},
                {label:'付款完成'},
                {label:'已关闭'},
                {label:'已删除'}
              ],
              pageinfo: {
                pageNum: 1,
                pageSize: 5,
                total: 0,
              },
      }
    },
    methods:{
      //获取数据
      postList(){
       var userId = vm.$cookies.get("userId");
       var token = vm.$cookies.get("token");
       var unionId = vm.$cookies.get("unionId");
      },
     exportExcel() {
           require.ensure([], () => {
             const { export_json_to_excel } = require('../Expcel/Export2Excel');
             const tHeader = ['序号', '昵称', '姓名'];
             // 上面设置Excel的表格第一行的标题
             const filterVal = ['index', 'nickName', 'name'];
             // 上面的index、nickName、name是tableData里对象的属性
             const list = this.list;  //把data里的tableData存到list
             const data = this.formatJson(filterVal, list);
             export_json_to_excel(tHeader, data, '列表excel');
           })
         },

         formatJson(filterVal, jsonData) {
           return jsonData.map(v => filterVal.map(j => v[j]))
           },
      //翻页
      current_change(val){
        this.pageinfo.pageNum=val
        this.postList()
      }
    },
    mounted() {
      this.postList()
    }
  }
</script>

<style scoped>
  div,h1{
    background: #fff;
  }
  .central{
    width: 100%;
    margin: 5px 0;
    background: #fff;
  }
  ul{
    display: flex;
  }

i{
  margin: 5px 0;
  display: inline-block
}
</style>
